<!-- Bot Read Me -->
<!-- Author: Edwin -->
<template>
  <div>
    <div class='bot-read-me'>
      <el-card shadow="never">
        <div class="bot-read-me-introduce">
          <div class="bot-read-me-introduce-image">
            <el-image :src="botInfo.url">
              <div slot="error"
                   class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
          <div class="bot-read-me-introduce-content">
            <div class="bot-read-me-introduce-content-title">
              {{ botInfo.name }}
              <el-tag size="small">{{$t('custom.botStore.console.free')}}</el-tag>
            </div>
            <div class="bot-read-me-introduce-content-tips">
              {{ botInfo.description }}
            </div>
            <div class="bot-read-me-introduce-content-other">
              <div class="bot-read-me-introduce-content-other-update-time">{{$t('custom.botStore.console.updatedDate')}}： {{ botInfo.updateTime || '&nbsp;&nbsp;&nbsp;' }}</div>
              <div class="bot-read-me-introduce-content-other-version"> {{$t('custom.botStore.console.version')}}： {{ botInfo.version || '&nbsp;&nbsp;&nbsp;' }}</div>
              <div class="bot-read-me-introduce-content-other-author">{{$t('custom.botStore.console.author')}} ： {{ botInfo.author || '&nbsp;&nbsp;&nbsp;' }}</div>
            </div>
          </div>
          <div class="bot-read-me-introduce-button">
            <el-button size="small"
                       type="primary">{{ $t('custom.sys.addToMyBots') }}</el-button>
            <el-button size="small"
                       @click="closeReadMePage">{{ $t('custom.back') }}</el-button>
          </div>
        </div>
      </el-card>
      <el-card shadow="never">
        <div slot="header">{{$t('custom.botStore.console.readme')}}</div>
        <div class="bot-read-me-content">
          <div v-text="botInfo.description"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    readMeDialog: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    readMeStatus: {
      get: function () {
        return this.readMeDialog
      },
      set: function (val) {
        this.$emit('closeDialog', val)
      }
    }
  },
  data () {
    return {
      botInfo: {
        id: '',
        tenantCode: '',
        name: '',
        icon: null,
        description: '',
        enable: true,
        url: null,
        sysVersion: '1.0',
        createTime: null,
        updateTime: null,
        sysBotId: '',
        version: '1.0',
        sysEnable: true
      }
    }
  },

  created () {
    this.botInfo.id = this.$route.query.id
    this.init()
  },
  methods: {
    closeReadMePage () {
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== 'mspbots-bots-bot-store-bot-read-me')
      this.$router.back()
    },
    init () {
      this.$interface.botStore.getTenantBotInfoApi({ id: this.botInfo.id })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.botInfo = res.data
        }).catch(() => { })
    }
  }
  // destroyed () {
  //   this.closeReadMePage()
  // }
}
</script>

<style scoped lang="scss">
@import "./bot-store";
</style>
<style lang="scss">
.custom-read-me-dialog{
  .el-dialog .el-dialog__header {
    padding: 0 !important;
  }
}
</style>
